<template>
  <link rel="stylesheet" href="/assets/css/info.css" />

  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
        <!-- 订单状态 -->
        <div class="aui-pay-change">
            <div class="aui-flex">
                <div class="aui-flex-box">
                    <h3>填写退货单</h3>
                </div>
                <div class="aui-pay-zfb">
                    <img src="/assets/images/icon-zfb.png" alt="" />
                </div>
            </div>
        </div>

        <!-- 退货地址 -->
        <div class="aui-flex">
            <div style="font-size: 16px">退货地址：</div>
            <div class="aui-flex-box">
                <h3>
                    张三 <em>13060808099</em>
                </h3>
                <p>广东省广州市海珠区财智大厦</p>
            </div>
        </div>
    </section>
  </section>

  <van-divider :style="{ borderColor: '#1989fa' }" />

  <!-- 商品卡片 -->
  <van-card
    v-for="(item, key) in product"
    :title="item.products.name"
    :thumb="item.products.thumbs_text"
    :num="item.pronum"
    @click-thumb="toProductInfo(item.proid)"
  >
    <template #title>
      <div class="title">{{item.products.name}}</div>
    </template>

    <!-- 卡片的插槽部分 -->
    <template #desc v-if="item.attrs">
      <van-tag v-for="(attr,index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
    </template>

    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
    </template>

    <template #tags>
      <div class="price">单价：￥{{item.price}}</div>
    </template>

    <template #price>
      <div class="price">合计：￥{{item.total}}</div>
    </template>
  </van-card>

  <!-- 寄件信息 -->
  <van-form @submit="submit">
    <van-field
      label="物流公司"
      placeholder="点击选择物流公司"
      v-model="back.express_name"
      readonly
      is-link
      @click="ExpressShow = true"
    />

    <!-- 弹框组件 -->
    <van-popup v-model:show="ExpressShow" position="bottom">
      <van-picker
        title="选择物流"
        :columns="ExpressList"
        :columns-field-names="{text: 'name', value: 'id'}"
        @confirm="ExpressConfirm"
        @cancel="ExpressShow = false"
      />
    </van-popup>

    <van-field
      label="寄件地址"
      placeholder="点击选择寄件地址"
      v-model="back.addr_name"
      readonly
      is-link
      @click="AddressShow = true"
    />

    <!-- 弹框组件 -->
    <van-popup v-model:show="AddressShow" position="bottom">
      <van-picker
        title="选择寄件地址"
        :columns="AddressList"
        :columns-field-names="{text: 'name', value: 'id'}"
        @confirm="AddressConfirm"
        @cancel="AddressShow = false"
      />
    </van-popup>

    <van-field
      v-model="back.expresscode"
      name="expresscode"
      label="物流单号"
      placeholder="请输入物流单号"
      :rules="[{required: true, message: '请输入物流单号'}]"
    />

    <van-field
      v-model="back.remark"
      name="remark"
      rows="2"
      autosize
      label="退货备注"
      type="textarea"
      maxlength="120"
      placeholder="请输入退货备注"
      show-word-limit
      :rules="[{required: true, message: '请输入退货备注'}]"
    />

    <!-- 头像上传 -->
    <van-field name="thumbs" label="上传图集">
      <!-- 插槽重新输入框部分，用文件上传来代替 -->
      <template #input>
          <van-uploader multiple v-model="thumbs" :max-count="6" />
      </template>
    </van-field>

    <div style="width:50%;margin:2em auto;">
      <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
    </div>

  </van-form>
</template>

<script setup>
  const {proxy} = getCurrentInstance()

  let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
  let loading = ref(false)
  let product = ref([])
  let address = ref(null)
  let order = ref({})
  let back = ref({
    expressid: 0,
    express_name: '',
    addrid: 0,
    addr_name: '',
    remark: '',
  })

  let thumbs = ref([])

  // 物流快递公司
  let ExpressShow = ref(false)
  let ExpressList = ref([])

  //寄件地址
  let AddressShow = ref(false)
  let AddressList = ref([])

  onBeforeMount(() => {
    OrderData()
    ExpressData()
    AddressData()
  })

  const OrderData = async () =>
  {
    var params = {
      orderid:orderid,
      busid: proxy.$business.value.id
    }

    var result = await proxy.$POST({
      url: '/order/info',
      params
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    address.value = result.data.address
    order.value = result.data.order

    if(result.data.product)
    {
      result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
    }

    product.value = result.data.product

  }

  const ExpressData = async () =>
  {
    var result = await proxy.$POST({url: '/express/index'})

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    ExpressList.value = result.data
  }

  const AddressData = async () =>
  {
    var result = await proxy.$POST({
      url: '/address/index',
      params: {
        busid: proxy.$business.value.id
      }
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    var list = []

    result.data.map((item) => {
      list.push({
        id: item.id,
        name: `${item.region_text} ${item.address} (${item.mobile})`
      })
    })

    AddressList.value = list
  }


  //物流确认方法
  const ExpressConfirm = async ({selectedOptions}) =>
  {
    ExpressShow.value = false

    back.value.expressid = selectedOptions[0].id
    back.value.express_name = selectedOptions[0].name
  }

  //寄件地址确认方法
  const AddressConfirm = async ({selectedOptions}) =>
  {
    AddressShow.value = false

    back.value.addrid = selectedOptions[0].id
    back.value.addr_name = selectedOptions[0].name
  }

  //跳转到商品详情界面
  const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})

  //表单提交
  const submit = async (values) =>
  {
    // loading.value = true

    if(!back.value.expressid)
    {
      proxy.$fail('请选择物流公司')
      return false
    }

    if(!back.value.addrid)
    {
      proxy.$fail('请选择寄件地址')
      return false
    }

    var params = {
      busid: proxy.$business.value.id,
      orderid: orderid,
      expressid: back.value.expressid,
      expresscode: back.value.expresscode,
      addrid: back.value.addrid,
      remark: back.value.remark,
      thumbs: [],
    }

    if(values.thumbs.length > 0)
    {
      values.thumbs.map((item) => {
        params.thumbs.push(item.file)
      })
    }

    //接口调用
    if(params.thumbs.length > 0) //有图片
    {
        var result = await proxy.$UPLOAD({
            url: '/back/add',
            params
        })
    }else  //没有图片
    {
        var result = await proxy.$POST({
            url: '/back/add',
            params
        })
    }

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }else
    {
      proxy.$success({
        message: result.msg,
        onClose: () => proxy.$router.go(-1)
      })
      return false
    }
  }

</script>

<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }
  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .actions{
    position: fixed;
    width:100%;
    left:0;
    bottom:0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }

  .BackTitle{
    font-size:22px;
    font-weight: bold;
    text-indent: 1em;
  }
</style>
